<template>
	<div id="app" class="flex col">
		<Header id="header" />
		<!-- <Asider id="asider" /> -->
		<div id="main" class="flex row fit">
			<!-- <Header id="header" /> -->
			<!-- <Asider id="asider" /> -->
			<div id="body" class="fit">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script>
import Header from "@/components/Header/Index.vue"
import Asider from "@/components/Asider/Index.vue"
import bus from "@/bus"

export default {
	name: "App",
	components: {
		Header,
		Asider,
	},
	props: {},
	data() {
		return {}
	},
	computed: {},
	watch: {},
	methods: {
		resize(event) {
			bus.$emit("resize", event)
		},
	},
	created() {},
	mounted() {
		this.$nextTick(() => {
			window.addEventListener("resize", this.resize)
		})
	},
	beforeDestroy() {
		window.removeEventListener("resize", this.resize)
	},
}
</script>

<style lang="scss">
#app {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	#asider {
		position: relative;
		width: 220px;
		background-color: $font-5-color;
		border-right: 1px solid $border-2-color;
		// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 2;
	}

	#header {
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	#main {
		box-sizing: border-box;
		position: relative;
		z-index: 0;

		> #body {
			box-sizing: border-box;
			position: relative;
			z-index: 0;
			overflow: auto;
		}
	}
}
</style>

